<template>
  <view class="card match-card" :class="{ 'completed-match': match.is_finished }">
    <!-- 卡片头部 -->
    <view class="card-header">
      <view>
        <view class="card-title">{{ match.league }}</view>
        <!-- <view class="card-subtitle" v-if="match.round">{{ match.round }}</view> -->
      </view>
      <view class="match-status" v-if="match.is_finished">已结束</view>
    </view>
    
    <!-- 比赛球队 -->
    <view class="match-teams">
      <view class="team">
        <!-- <view class="team-logo">{{ getTeamShortName(match.home_team) }}</view> -->
        <view class="team-name">{{ match.home_team }}</view>
      </view>
      <view class="match-vs">VS</view>
      <view class="team">
        <!-- <view class="team-logo">{{ getTeamShortName(match.away_team) }}</view> -->
        <view class="team-name">{{ match.away_team }}</view>
      </view>
    </view>
    
    <!-- 比分（仅完成的比赛显示） -->
    <view class="match-score" v-if="match.is_finished">
      {{ match.home_score }} - {{ match.away_score }}
    </view>
    
    <!-- 比赛时间和地点 -->
    <view class="match-time">
      {{ formatDateTime(match.match_time) }} · {{ match.stadium || '未知球场' }}
    </view>
    
    <!-- 更新预测选择区块 -->
    <view class="prediction-section">
      <view v-if="match.is_finished">
        <!-- 已完成的比赛显示预测结果和原推荐 -->
        <view class="prediction-result">
          <text 
            :class="[
              'result-tag', 
              match.prediction_correct ? 'correct-tag' : 'wrong-tag'
            ]"
          >
            {{ match.prediction_correct ? '预测正确' : '预测错误' }}
          </text>
        </view>
        
        <!-- 显示实际预测值 -->
        <view class="user-prediction" v-if="match.prediction_result">
          <view class="user-prediction-header">
            <text class="prediction-label">推荐预测</text>
            <view class="prediction-badge">
              <text class="prediction-value">{{ match.prediction_result }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view v-else>
        <!-- 未完成的比赛显示系统推荐 -->
        <view class="system-recommendations" v-if="match.prediction_result">
          <view class="recommendations-header">
            <text class="recommendations-title">推荐预测</text>
            <view class="prediction-tag">
              <text class="prediction-value">{{ match.prediction_result }}</text>
            </view>
          </view>
        </view>
        <view v-else class="no-recommendation">
          <text>暂无推荐结果</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    match: {
      type: Object,
      required: true
    }
  },
  methods: {
    selectPrediction(type) {
      // 如果比赛已结束，不允许预测
      if (this.match.is_finished) return;
      
      // 创建一个新的对象，避免直接修改props
      const updatedMatch = JSON.parse(JSON.stringify(this.match));
      updatedMatch.prediction_result = type;
      
      // 触发事件通知父组件
      this.$emit('prediction-change', updatedMatch);
    },
    
    // 获取球队简称
    getTeamShortName(teamName) {
      if (!teamName) return '';
      return teamName.substring(0, 3).toUpperCase();
    },
    
    // 格式化日期时间
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '';
      
      try {
        const date = new Date(dateTimeStr);
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hours = date.getHours();
        const minutes = String(date.getMinutes()).padStart(2, '0');
        
        return `${month}月${day}日 ${hours}:${minutes}`;
      } catch (e) {
        console.error('日期格式化错误:', e);
        return dateTimeStr;
      }
    }
  }
}
</script>

<style lang="scss">
.match-card {
  border-left: 8rpx solid $primary;
  position: relative;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
  
  &:active {
    transform: scale(0.98);
  }
  
  &.completed-match {
    border-left: 8rpx solid $gray;
    opacity: 0.88;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: $spacing-base;
  position: relative;
  padding-bottom: $spacing-xs;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: $font-size-lg;
  font-weight: 700;
  color: $text-color;
  letter-spacing: 0.5rpx;
}

.card-subtitle {
  font-size: $font-size-sm;
  color: $text-color-secondary;
  margin-top: 4rpx;
}

.match-status {
  font-size: $font-size-xs;
  background-color: $gray;
  color: $light;
  padding: 4rpx 16rpx;
  border-radius: 30rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
  padding: 0 $spacing-sm;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
}

.team-logo {
  width: 94rpx;
  height: 94rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #f5f7fa 0%, #e6e9f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: $spacing-xs;
  font-size: $font-size-lg;
  font-weight: 700;
  color: $primary;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.team-name {
  font-size: $font-size-sm;
  text-align: center;
  font-weight: 500;
  margin-top: 8rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 72rpx;
}

.match-vs {
  font-weight: 800;
  color: $text-color-secondary;
  font-size: 28rpx;
  position: relative;
  z-index: 1;
  
  &::before {
    content: '';
    position: absolute;
    width: 50rpx;
    height: 50rpx;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 50%;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.match-score {
  font-size: $font-size-xl;
  font-weight: bold;
  text-align: center;
  margin-bottom: $spacing-base;
  padding: $spacing-xs 0;
  background-color: rgba(0, 0, 0, 0.02);
  color: $primary;
  letter-spacing: 2rpx;
}

.match-time {
  font-size: $font-size-xs;
  color: $text-color-secondary;
  text-align: center;
  margin-bottom: $spacing-base;
  padding: 0 $spacing-base;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::before, &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
    margin: 0 16rpx;
  }
}

.prediction-section {
  margin-top: 10px;
  padding: 0 $spacing-sm $spacing-sm;
  
  .prediction-result {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16rpx 0;
    
    .result-tag {
      padding: 8rpx 24rpx;
      border-radius: 30rpx;
      font-size: 28rpx;
      font-weight: 600;
      letter-spacing: 2rpx;
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
    }
    
    .correct-tag {
      background: linear-gradient(135deg, #4CAF50 0%, darken(#4CAF50, 10%) 100%);
      color: #ffffff;
    }
    
    .wrong-tag {
      background: linear-gradient(135deg, #F44336 0%, darken(#F44336, 10%) 100%);
      color: #ffffff;
    }
  }
  
  .user-prediction {
    display: flex;
    justify-content: center;
    margin: 20rpx 0;
    
    .user-prediction-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
    }
    
    .prediction-label {
      font-size: 26rpx;
      color: $text-color-secondary;
      font-weight: 500;
      display: flex;
      align-items: center;
      
      &::before {
        content: '';
        width: 6rpx;
        height: 24rpx;
        background-color: $primary;
        margin-right: 10rpx;
        border-radius: 3rpx;
      }
    }
    
    .prediction-badge {
      background: linear-gradient(135deg, rgba($primary, 0.8) 0%, rgba(darken($primary, 10%), 0.9) 100%);
      padding: 6rpx 18rpx;
      border-radius: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(58, 134, 255, 0.12);
      
      .prediction-value {
        font-size: 28rpx;
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 1rpx;
      }
    }
  }
  
  .prediction-options {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
    
    .prediction-option {
      flex: 1;
      padding: 16rpx 24rpx;
      margin: 0 10rpx;
      text-align: center;
      border-radius: 8rpx;
      background-color: #f5f7fa;
      border: 1px solid rgba(0, 0, 0, 0.03);
      transition: all 0.2s ease;
      
      text {
        font-size: 28rpx;
        color: $text-color;
        font-weight: 500;
      }
      
      &:active {
        transform: scale(0.96);
      }
      
      &.selected {
        background-color: $primary;
        border-color: $primary;
        box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.2);
        
        text {
          color: $light;
        }
      }
    }
  }
  
  .no-recommendation {
    display: flex;
    justify-content: center;
    padding: 16rpx 0;
    margin: 20rpx 0;
    border-radius: 8rpx;
    background-color: rgba(0, 0, 0, 0.02);
    color: $text-color-secondary;
    font-size: 28rpx;
    text-align: center;
    font-style: italic;
  }
}

.system-recommendations {
  margin-top: 16rpx;
  padding: 20rpx;
  background: linear-gradient(to right, rgba(245, 245, 245, 0.5), rgba(250, 250, 250, 0.8));
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  
  .recommendations-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
  }
  
  .recommendations-title {
    font-size: 26rpx;
    color: $text-color-secondary;
    font-weight: 500;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      width: 6rpx;
      height: 24rpx;
      background-color: $primary;
      margin-right: 10rpx;
      border-radius: 3rpx;
    }
  }
  
  .prediction-tag {
    background: linear-gradient(135deg, $primary 0%, darken($primary, 10%) 100%);
    padding: 6rpx 18rpx;
    border-radius: 30rpx;
    text-align: center;
    box-shadow: 0 4rpx 12rpx rgba(58, 134, 255, 0.15);
  }
  
  .prediction-value {
    font-size: 28rpx;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 1rpx;
  }
}

.no-recommendation {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  margin: 20rpx 0;
  border-radius: 12rpx;
  background: linear-gradient(to right, rgba(240, 240, 240, 0.5), rgba(245, 245, 245, 0.8));
  color: $text-color-secondary;
  font-size: 28rpx;
  text-align: center;
  font-style: italic;
}
</style> 